<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
    <p>
        <button @click="count++">
            Count is: {{ count }}
        </button>
    </p>

    <p>
        input输入框：
        <input v-model="count" placeholder="edit me">
    </p>

    <p>
        单个复选框:
    <div>
        <input type="checkbox" id="checkbox" v-model="checked"/>
        <label for="checkbox">{{ checked }}</label>
    </div>
    </p>

    <p>
        多个复选框：
    <div>Checked names: {{ checkedNames }}</div>
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"/>
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames"/>
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"/>
    <label for="mike">Mike</label>
    </p>

    <p>
        单选按钮：
    <div>Picked: {{ picked }}</div>

    <input type="radio" id="one" value="One" v-model="picked" />
    <label for="one">One</label>

    <input type="radio" id="two" value="Two" v-model="picked" />
    <label for="two">Two</label>
    </p>

    <p>
        单选下拉框：
    <div>Selected: {{ selected }}</div>

    <select v-model="selected">
        <option disabled value="">Please select one</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    </p>

    <p>
        多选下拉框：
    <div>multipleSelected: {{ multipleSelected }}</div>

    <select v-model="multipleSelected" multiple>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    </p>

    <p>
        v-for动态渲染下拉框：
    <div>singleSelected: {{ singleSelected }}</div>

    <select v-model="singleSelected">
        <option v-for="option in options" :value="option.value">
            {{ option.text }}
        </option>

    </select>
    </p>
</div>

<script>
    const {createApp, ref} = Vue
    const checkedNames = ref([])
    const options = ref([
        { text: 'One', value: 'A' },
        { text: 'Two', value: 'B' },
        { text: 'Three', value: 'C' }
    ])

    createApp({
        setup() {
            return {
                count: ref(0),
                checked: ref(false),
                checkedNames,
                picked: ref(),
                selected: ref('A'),
                multipleSelected: ref(),
                options,
                singleSelected: ref('C')
            }
        }
    }).mount('#app')
</script>
</body>
</html>